<!-- 表格Tab组件 -->
<script setup lang="ts">
import { MissionVO } from '@/api/mission/types';
import { MissionTypeNames, MissionPriorityNames, MissionStatusNames } from '@/api/mission/types';
import { MISSION_TYPE, MISSION_PRIORITY, MISSION_STATUS } from '@/constants';

interface Props {
  missions: MissionVO[];
  loading: boolean;
  isAdmin: boolean;
}

defineProps<Props>();

const emit = defineEmits<{
  selectionChange: [selection: MissionVO[]];
  statusChange: [mission: MissionVO, newStatus: number];
  edit: [mission: MissionVO];
  delete: [id: number];
}>();

const removeIds = ref<number[]>([]);

/** 行选中 */
function handleSelectionChange(selection: MissionVO[]) {
  removeIds.value = selection.map(item => item.id!);
  emit('selectionChange', selection);
}
</script>

<template>
  <div class="table-content">
    <el-table
      v-loading="loading"
      :data="missions"
      class="mission-table"
      row-key="id"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="50" align="center" />
      <el-table-column label="任务标题" prop="missionTitle" min-width="180" show-overflow-tooltip />
      <el-table-column label="任务类型" align="center" width="120">
        <template #default="scope">
          <el-tag
            :type="
              scope.row.missionType === MISSION_TYPE.NEW_FEATURE
                ? 'success'
                : scope.row.missionType === MISSION_TYPE.BUG_FIX
                  ? 'danger'
                  : scope.row.missionType === MISSION_TYPE.OPTIMIZATION
                    ? 'warning'
                    : 'info'
            "
            size="small"
          >
            {{ MissionTypeNames[scope.row.missionType!] }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="优先级" align="center" width="100">
        <template #default="scope">
          <el-tag
            :type="
              scope.row.priority === MISSION_PRIORITY.HIGH
                ? 'danger'
                : scope.row.priority === MISSION_PRIORITY.MEDIUM
                  ? 'warning'
                  : 'info'
            "
            size="small"
          >
            {{ MissionPriorityNames[scope.row.priority!] }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="状态" align="center" width="120">
        <template #default="scope">
          <el-select
            v-if="
              isAdmin &&
              scope.row.status !== MISSION_STATUS.COMPLETED &&
              scope.row.status !== MISSION_STATUS.CLOSED
            "
            :model-value="scope.row.status"
            size="small"
            @change="val => emit('statusChange', scope.row, val as number)"
          >
            <el-option
              v-for="(name, value) in MissionStatusNames"
              :key="value"
              :label="name"
              :value="Number(value)"
            />
          </el-select>
          <el-tag
            v-else
            :type="
              scope.row.status === MISSION_STATUS.COMPLETED
                ? 'success'
                : scope.row.status === MISSION_STATUS.IN_PROGRESS
                  ? 'warning'
                  : scope.row.status === MISSION_STATUS.CLOSED
                    ? 'danger'
                    : 'info'
            "
            size="small"
          >
            {{ MissionStatusNames[scope.row.status!] }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="创建人" prop="createByName" width="100" align="center" />
      <el-table-column label="创建时间" prop="createTime" width="160" align="center" />
      <el-table-column label="目标版本" prop="version" width="100" align="center" />
      <el-table-column v-if="isAdmin" label="操作" fixed="right" width="150">
        <template #default="scope">
          <div class="action-cell">
            <el-button type="primary" link size="small" @click="emit('edit', scope.row)">
              编辑
            </el-button>
            <el-button type="danger" link size="small" @click="emit('delete', scope.row.id)">
              删除
            </el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<style scoped>
/* 表格内容 */
.table-content {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  overflow-y: auto;
}

.mission-table {
  --el-table-header-bg-color: #f8fafc;
  --el-table-border-color: #e5e7eb;
  --el-table-header-text-color: #374151;
  --el-table-row-hover-bg-color: #f1f5f9;
}

.action-cell {
  display: flex;
  gap: 8px;
  justify-content: center;
}
</style>
